// pages/result/result.js
var numCount = 5;
var numSlot = 5;
var mW = 160  ;
var mCenter = mW/2;
var mAngle = Math.PI*2/numCount;
var mRadius = mCenter - 30;
var radCtx = wx.createCanvasContext("radarCanvas");
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array:{
      name:"",
      defence:"",
      force:"",
      inteligence:"",
      politics:"",
      charm:"",
      biolography:"",
      photo_url:""
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var nameInput = options.name;
    wx.request({
      url:'http://localhost:8080/bloody_characters/servlet01?name='+nameInput,
      data:{},
      method:'GET',
      header:{'Content-type':'application/x-www-form-urlencoded;charset=utf-8'},
      success:function(res){
        // var biolography = res.cookies[0].replace("biolography=","");
        var defence = res.cookies[1].replace("defence=","");
        var force = res.cookies[2].replace("force=","");
        var inteligence = res.cookies[3].replace("inteligence=","");
        var politics = res.cookies[4].replace("politics=","");
        var charm = res.cookies[5].replace("charm=","");
        var photo_url = "../images/result_photo/"+nameInput+".png";
        console.log(nameInput);
        console.log(defence);
        console.log(force);
        console.log(inteligence);
        console.log(politics);
        console.log(charm);
        console.log(res.data);
        that.setData({
          ["array.name"]: nameInput,
          ["array.defence"]:parseInt(defence),
          ["array.force"]:parseInt(force),
          ["array.inteligence"]:parseInt(inteligence),
          ["array.politics"]:parseInt(politics),
          ["array.charm"]:parseInt(charm),
          ["array.biolography"]:res.data,
          ["array.photo_url"]:photo_url
        }),
        // var sourceData1 = [["统率",that.data.array.defence],["武力",that.data.array.force],["智力",that.data.array.inteligence],["政治",that.data.array.politics],["魅力",that.data.charm]];
        //调用
        that.drawEdge() //画六边形
        //this.drawArcEdge() //画圆
        that.drawLinePoint()
        //设置数据
        that.drawRegion([["统率",that.data.array.defence],["武力",that.data.array.force],["智力",that.data.array.inteligence],["政治",that.data.array.politics],["魅力",that.data.array.charm]],'rgba(255, 0, 0, 0.5)') //第一个人的
        //设置文本数据
        that.drawTextCans([["统率",that.data.array.defence],["武力",that.data.array.force],["智力",that.data.array.inteligence],["政治",that.data.array.politics],["魅力",that.data.array.charm]])
        //设置节点
        that.drawCircle([["统率",that.data.array.defence],["武力",that.data.array.force],["智力",that.data.array.inteligence],["政治",that.data.array.politics],["魅力",that.data.array.charm]],'red')
        //开始绘制
        radCtx.draw()
      },
      fail:function(res){
        console.log("请求失败！");
      },})
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // var sourceData1 = [["统率",this.data.array.defence],["武力",this.data.array.force],["智力",this.data.array.inteligence],["政治",this.data.array.politics],["魅力",this.data.charm]];
    // //调用
    // this.drawEdge() //画六边形
    // //this.drawArcEdge() //画圆
    // this.drawLinePoint()
    // //设置数据
    // this.drawRegion(sourceData1,'rgba(255, 0, 0, 0.5)') //第一个人的
    // //设置文本数据
    // this.drawTextCans(sourceData1)
    // //设置节点
    // this.drawCircle(sourceData1,'red')
    // //开始绘制
    // radCtx.draw()
  },
  // 绘制6条边
  drawEdge: function(){
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(1)  //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numCount; j++) {
        //坐标
        var x = mCenter + rdius * Math.cos((mAngle) * j + Math.PI/3.3);
        var y = mCenter + rdius * Math.sin((mAngle) * j + Math.PI/3.3);
        radCtx.lineTo(x, y);
      }
      radCtx.closePath()
      radCtx.stroke()
    } 
  },
  // 绘制连接点
  drawLinePoint:function(){
    radCtx.beginPath();
    for (var k = 0; k < numCount; k++) {
      var x = mCenter + mRadius * Math.cos((mAngle) * k + Math.PI/3.3);
      var y = mCenter + mRadius * Math.sin((mAngle) * k + Math.PI/3.3);

      radCtx.moveTo(mCenter, mCenter);
      radCtx.lineTo(x, y);
    }
    radCtx.stroke();
  },
  //绘制数据区域(数据和填充颜色)
  drawRegion: function (mData,color){
      
      radCtx.beginPath();
      for (var m = 0; m < numCount; m++){
      var x = mCenter + mRadius * Math.cos((mAngle) * m + Math.PI/3.3) * mData[m][1] / 100;
      var y = mCenter + mRadius * Math.sin((mAngle) * m + Math.PI/3.3) * mData[m][1] / 100;

      radCtx.lineTo(x, y);
      }
      radCtx.closePath();
      radCtx.setFillStyle(color)
      radCtx.fill();
  },

    //绘制文字
  drawTextCans: function (mData){

      radCtx.setFillStyle("white")
      radCtx.font = 'bold 12px cursive'  //设置字体
      for (var n = 0; n < numCount; n++) {
        var x = mCenter + mRadius * Math.cos(mAngle * n + Math.PI/3.3);
        var y = mCenter + mRadius * Math.sin(mAngle * n + Math.PI/3.3);
        // console.log(x,y);
        // radCtx.fillText(mData[n][0], x, y);
        //通过不同的位置，调整文本的显示位置
        if ((mAngle * n + Math.PI/3.3) * n >= 0 && (mAngle * n + Math.PI/3.3) <= Math.PI / 2) {
          radCtx.fillText(mData[n][0], x+5, y+5);
        } else if ((mAngle * n + Math.PI/3.3) * n > Math.PI / 2 && (mAngle * n + Math.PI/3.3) <= Math.PI) {
          radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width-7, y+5);
        } else if ((mAngle * n + Math.PI/3.3) > Math.PI && (mAngle * n + Math.PI/3.3) <= Math.PI * 3 / 2) {
          radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width-5, y);
        } else {
          radCtx.fillText(mData[n][0], x+7, y+2);
        }

      }
    },
    //画点
    drawCircle: function(mData,color){
       var r = 3; //设置节点小圆点的半径
       for(var i = 0; i<numCount; i ++){
          var x = mCenter + mRadius * Math.cos(mAngle * i + Math.PI/3.3) * mData[i][1] / 100;
          var y = mCenter + mRadius * Math.sin(mAngle * i + Math.PI/3.3) * mData[i][1] / 100;
          radCtx.beginPath();
          radCtx.arc(x, y, r, 0, Math.PI * 2);
          radCtx.fillStyle = color;
          radCtx.fill();
        }

    },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})